<template>
	<el-container>
		<el-header style="height: auto;justify-content: left;">
			<div class="u-flex-1">
				<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
			</div>
			<div class="u-flex-1">
				<el-date-picker v-model="trendValue1" type="daterange" :disabled-date="disabledDate" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
			</div>
			<div class="u-m-l-15">
				<el-radio-group v-model="type">
					<el-radio-button label="1">进店客流</el-radio-button>
					<el-radio-button label="2">店外客流</el-radio-button>
				</el-radio-group>
			</div>
			<div class="u-m-l-15">
				<el-button icon="el-icon-download">导出</el-button>
			</div>
		</el-header>
		<el-main class="">
			<el-row v-if="type==1" :gutter="15">
				<!-- <el-col :lg="8">
				<el-card shadow="never">
					<sc-statistic title="Title" value="112893" description="Description" tips="Tips"
						groupSeparator></sc-statistic>
				</el-card>
			</el-col> -->
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="进店人次" value="112893" prefix="" groupSeparator>
							<sc-trend v-model="trendValue1"></sc-trend>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="进店人数" value="112893" prefix="" groupSeparator>
							<sc-trend v-model="trendValue1"></sc-trend>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="出店人数" value="11" prefix="" groupSeparator>
							<sc-trend v-model="trendValue1"></sc-trend>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="进店率" value="100%" prefix="" groupSeparator>
							<sc-trend v-model="trendValue1"></sc-trend>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="保有量" value="1128" prefix="" groupSeparator>
							<sc-trend v-model="trendValue1"></sc-trend>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="集客力" value="1128" prefix="" groupSeparator>
							<sc-trend v-model="trendValue2"></sc-trend>
						</sc-statistic>
					</el-card>
				</el-col>
			</el-row>
			<div>
				<div class="u-font-blod u-font-20 u-m-b-20">进店客流统计</div>
				<div class="u-m-b-20">
					<el-radio-group v-model="radio2">
						<el-radio-button label="进店客流" />
						<el-radio-button label="出店客流" />
						<el-radio-button label="进店率" />
						<el-radio-button label="保有量" />
						<el-radio-button label="集客力" />
					</el-radio-group>
				</div>
				<div>
					<el-card shadow="never">
						<scEcharts height="300px" :option="option2"></scEcharts>
					</el-card>
				</div>
			</div>


			<div>
				<div class="u-font-blod u-font-20 u-m-b-20"></div>
				<div>
					<el-card shadow="never">
						<scEcharts height="300px" :option="option"></scEcharts>
					</el-card>
				</div>
			</div>
			<div>
				<div class="u-font-blod u-font-20 u-m-b-20">各通道进店人次统计表</div>
				<div>
					<el-table :data="tableData" show-summary style="width: 100%" border>
						<el-table-column prop="date" label="时间" />
						<el-table-column prop="n1" label="椰乡店" align="center" />
						<el-table-column prop="n2" label="开源店" align="center" />
						<el-table-column prop="n3" label="椰乡店" align="center" />
						<el-table-column prop="n4" label="开源店" align="center" />
					</el-table>
				</div>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import scStatistic from '@/components/scStatistic';
	import scSelectFilter from '@/components/ShowTabData'
	import scEcharts from '@/components/scEcharts';
	export default {
		name: 'statistic',
		components: {
			scStatistic,
			scSelectFilter,
			scEcharts
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9,
				radio2: '进店客流',
				type: '1',
				tableData:[
					{
						date:'0:00-0:59',
						n1:1,
						n2:2,
						n3:1,
						n4:1
					}
				],
				option: {
					title: {
						text: '进店客流',
						subtext: '',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '15px',
					},
					{
						data: [110, 180, 120, 120, 60, 90, 110],
						type: 'bar',
						barWidth: '15px',
					}]
				},
				option2: {
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['进店人次', '进店人数', '出店人数']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							//saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '进店人次',
							type: 'line',
							stack: 'Total',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '进店人数',
							type: 'line',
							stack: 'Total',
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '出店人数',
							type: 'line',
							stack: 'Total',
							data: [320, 332, 301, 334, 390, 330, 320]
						},
					]
				},
				filterData: [{
					title: "",
					key: "type",
					options: [{
							label: "今日",
							value: ""
						},
						{
							label: "昨日",
							value: "1"
						},
						{
							label: "近七日",
							value: "2"
						},
						{
							label: "近三十日",
							value: "3"
						},
					]
				}, ],
			}
		},
		mounted() {

		},
		methods: {
			filterChange(data) {
				this.$refs.table.upData(data)
			}
		}
	}
</script>

<style scoped>
	.el-card {
		margin-bottom: 15px;
	}

	.up {
		color: #F56C6C;
		margin-left: 5px;
	}

	.down {
		color: #67C23A;
		margin-left: 5px;
	}
</style>
